$(function () {
    let good = JSON.parse(localStorage.getItem('good'))
    console.log(good)
    initload(good[0])


    $('.minus').on('click', () => {
        if (parseInt($('.num').text()) <= 1) {
            $('.num').text(1)
        } else {
            $('.num').text(parseInt($('.num').text()) - 1)
        }
    })

    $('.manus').on('click', () => {
        $('.num').text(parseInt($('.num').text()) + 1)
    })
})

//初始化加载
function initload(good) {
    let str = `
    <ul class="list-inline col-12 col-sm-12 header">
                    <li><a href="#">首页</a></li>
                    <span>></span>
                    <li><a href="/perfume">香水</a></li>
                    <span>></span>
                    <li><a href="#">${good.caretory}</a></li>
                    <span>></span>
                    <li><a href="#">${good.sort}</a></li>
                </ul>
    <div class="col-12 col-sm-6 leftbody">
        <img src="${good.img_good}" class="w-100">
    </div>
    <div class="col-12 col-sm-6 rightbody">
        <div class="card w-100">
            <div class="card-body">
                <h5 class="card-title">${good.EnglishName}</h5>
                <h3 class="card-title">${good.title}</h3>
                <p class="card-text"> 详情:     ${good.EnglishName + good.caretory + '  ' + good.sort + '  ' + good.span}</p>
                <ul class="row ml">
                    
                </ul>
                <h3 class="card-title">¥:${good.price}</h3>
                <div class="row">
                    <div class="col-sm-4 col-4 btn-group btn-group-toggle b">
                        <span class="btn btn-outline-dark minus" type="button">-</span>
                        <span class="btn btn-outline num" disabled>1</span>
                        <span class="btn btn-outline-dark manus" type="button">+</span>
                    </div>
                    <div class="col-sm-8 col-8 b">
                        <div class="btn-group btn-group-toggle a">
                            <span class="btn btn-outline-dark">加入购物车</span>
                            <span class="btn btn-dark">立即购买</span>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    `
    $('.goodContent').html(str)
    addMl(good.ml.split(','))
}

function addMl(goodMl) {
    let str = ``

    for (let i in goodMl) {
        str += `
        <li class="col-3 col-sm-4">${goodMl[i]}ml</li>
        `
    }
    $('.ml').html(str)
}